/** 
 * 产品功能
*/
import './index.scss';//样式
import { Checkbox } from 'antd';
import { getProductFilter, getGoodsList } from '../../api/product';//引入接口
import { useEffect, useState } from 'react';
import { sortFilter } from '../../utils/const';
import { useLocation } from 'react-router-dom';
import Main from '../../layouts/Home';
export default () => {
    const location = useLocation()
    const ruleId = location.search ? location.search.split("=")[1] : "";
    /**
     * 存放请求的数据
     */
    const [List, setList] = useState({});

    /**
     * 品牌名称属性
     */
    const [saleProperties, setSaleProperties] = useState([]);

    /**
     * 品牌名称
     */
    const [brands, setBrands] = useState([]);

    /**
     * 请求品牌数据
     */
    const getFilterData = async () => {
        try {
            const data = await getProductFilter(ruleId);
            setList(data);//所有数据
            setSaleProperties(data.saleProperties);//品牌名称属性
            setBrands(data.brands);//品牌名称
        } catch (error) { }
    }
    useEffect(() => {
        getFilterData();
    }, [])


    /**
     * 升降默认选中
     */
    const [current, setCurrent] = useState(null);

    /**
     * 升降序
     */
    const sortMethod = async (id) => {
        console.log(id);
        try {
            if (id === 0) {
                id = 1
            } else if (id == 1) {
                id = 0
            }
            setCurrent(id);
        } catch (error) { }
    }

    /**
     * 商品列表模型
     */
    const [model, setModel] = useState({
        categoryId: "1007000",
        inventory: false,
        onlyDiscount: false,
        page: 1,
        pageSize: 20,
        sortField: null,
        sortMethod: null,
    });

    /**
     * 商品列表数据
     */
    const [goodsList, setGoodsList] = useState([]);

    /**
     * 获取商品列表
     */
    const getGoods = async () => {
        try {
            if (currentIndex === 0) {
                const { items } = await getGoodsList(model);
                console.log(items);
                setGoodsList(items);//数据
            } else if (currentIndex === 1) {
                const { items } = await getGoodsList({ ...model, ...{ sortField: "publishTime" } });
                console.log(items);
                setGoodsList(items);//数据
            } else if (currentIndex === 2) {
                const { items } = await getGoodsList({ ...model, ...{ sortField: "orderNum" } });
                console.log(items);
                setGoodsList(items);//数据
            } else if (currentIndex === 3) {
                const { items } = await getGoodsList({ ...model, ...{ sortField: "evaluateNum" } });
                console.log(items);
                setGoodsList(items);//数据
            } else {
                const { items } = await getGoodsList({
                    ...model, ...{
                        sortField: "price",
                        sortMethod: current === 0 ? 'desc' : 'asc'
                    }
                });
                console.log(items);
                setGoodsList(items);//数据
            }


        } catch (error) { }
    }
    useEffect(() => {
        getGoods();
    }, [current])

    /**
     * 商品排序
    **/
    const [sort, setSort] = useState(sortFilter.map(item => ({
        id: item.id,
        name: item.tabName
    })))

    /**
     * 默认选中
     */
    const [currentIndex, setCurrentIndex] = useState(0);

    /**
     * tab切换
     */
    const Choiced = async (id) => {
        try {
            setCurrentIndex(id);
        } catch (error) { }
    }
    useEffect(() => {
        getGoods();
    }, [currentIndex])


    return (
        <Main>
            <div className="container">
                {/* 导航 */}
                <div className="xtx-bread">
                    <div className="xtx-bread-item"><a href="#/">首页</a></div><i className="iconfont"></i>
                    <div className="xtx-bread-item"><a href="#/">{List.parentName}</a></div><i className="iconfont"></i>
                    <div className="xtx-bread-item"><a href="#/">{List.name}</a></div>
                </div>
                {/* 选择部分 */}
                <div className="sub_filter">
                    <div className="item">
                        <div className="head">品牌：</div>
                        <div className="body">
                            <a href="#/" className="ellipsis active">全部</a>
                            {brands.map(item => (
                                <a href="#/" className="ellipsis" key={item.id}>{item.name}</a>
                            ))}
                        </div>
                    </div>
                    {saleProperties.map(item => (
                        <div className="item" key={item.id}>
                            <div className="head" >{item.name}：</div>
                            <div className="body">
                                <a href="#/" className="ellipsis active">全部</a>
                                {item.properties.map(c => (
                                    <a href="#/" className="ellipsis" key={c.id}>{c.name}</a>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
                {/* 商品列表 */}
                <div className="goods_list">
                    {/* 排序 */}
                    <div className="sub_sort">
                        <div className="sort">
                            {
                                sort.map(item => <a href="#/" key={item.id} onClick={() => Choiced(item.id)} className={
                                    item.id === currentIndex && item.name !== '价格排序' ? 'active' : ''
                                }>{item.name}{
                                        item.id === 4 ? <><i onClick={() => sortMethod(0)} className={`up ${current === 1 ? "active" : ""}`}></i><i onClick={() => sortMethod(1)} className={`down ${current === 0 ? "active" : ""}`}></i></> : ''
                                    }</a>)
                            }
                        </div>
                        <div className="check">
                            <div className="xtx-checkbox">
                                <Checkbox /><span>仅显示有货商品</span>
                            </div>
                            <div className="xtx-checkbox">
                                <Checkbox /><span>仅显示特惠商品</span>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 商品 */}
                <ul className="shop_list">
                    {goodsList.map(item => (
                        <li key={item.id}>
                            <a href="#/" className="goods_item">
                                <img src={item.picture} />
                                <p className="shop_name ellipsis">{item.name}</p>
                                <p className="shop_desc ellipsis">{item.desc}</p>
                                <p className="shop_price">￥{item.price}</p>
                            </a>
                        </li>
                    ))}
                </ul>
            </div>
        </Main>
    )
}